<template>
  <my-div class="exchange">
     <head></head>
     <scroller :show-scrollbar="false">
      <my-div class="transfer-choose">
        <my-text :text="$t('wallet.we_change')" day_color="rgba(70,120,245,1)" night_color="rgba(184,111,36,1)"  class="transfer-title"></my-text>
        <div class="choose-currency">
          <text class="currency-name">{{$t('wallet.change_currency')}}</text>
          <div class="currency-wrapper">
            <text style="font-size:28px;color:rgba(60,71,98,1);">BTC</text>
          </div>
        </div>
        <div class="choose-currency">
          <text class="currency-name">{{$t('wallet.target_currency')}}</text>
          <div class="currency-wrapper">
            <text style="font-size:28px;color:rgba(60,71,98,1);">AXC</text>
          </div>
        </div>
        <div class="choose-currency">
          <text class="currency-name">{{$t('wallet.exchange_rate')}}</text>
          <div class="currency-wrapper">
            <text style="font-size:28px;color:rgba(60,71,98,1);">1 BTC/{{rate}} AXC</text>
          </div>
        </div>
        <div class="wrapper" style="margin-top:44px;">
          <text class="currency-name">{{$t('wallet.exchange_number')}}</text>
        </div>
        <div class="address-inter">
           <input :color='inputText.color' type="number" @input="changeNum"  class="address-input" v-model="form.num" />
        </div>
        <div class="wrapper" style="margin-top:44px;">
          <text class="currency-name">{{$t('wallet.transfer_money')}}</text>
        </div>
        <div class="address-inter">
           <input :color='inputText.color' type="number" @input="changeAmount"  class="address-input" v-model="form.amount" />
        </div>
         <div class="wrapper" style="margin-top:44px;">
          <text class="currency-name">{{$t('wallet.remark')}}</text>
        </div>
        <div class="address-inter">
           <input :color='inputText.color' type="text"  class="address-input" v-model="form.remark" />
        </div>
        <my-div day_bg="rgba(245,246,249,1)" class="address-attention" v-if="attention.length>0">
          <text class="transfer-attention" v-for="(content,key) of attention" :key="key">{{content}}</text>
        </my-div>
        <div class="sure-btn">
          <wxc-button :text="$t('wallet.true_change')" :textStyle="{'fontSize':'24px'}"  :btnStyle="{backgroundColor:'rgba(70,120,245,1)',width:'690px',height:'80px'}"
              @wxcButtonClicked="wxcButtonClicked"></wxc-button>
        </div>
      </my-div>
     </scroller>
       <sure-password ref='sure_pw' @success="sure_success"></sure-password>
  </my-div>
</template>

<script>
import { WxcButton } from 'weex-ui'
import SurePassword from '../../component/sure_password.vue';
export default {
  name: '',
  data() {
    return {
      balance:'',
      rate:'',
      form:{
        num:'',
        amount:'',
        remark:''
      },
      attention:[]
    }
  },
  components: {WxcButton,SurePassword},
  computed: {},
  watch: {
    // 'form.num':{
    //   handler(val){
    //     this.form.amount = (val*this.rate).toFixed(8)
    //   }
    // },
    // 'form.amount':{
    //   handler(val){
    //     this.form.num = (val/this.rate).toFixed(8)
    //   }
    // }
  },
  methods: {
    onLoad(){
       this.get_attention()
       this.get_exeChange_rate()
       this.check_user_havemoney()
    },
    changeNum(){
      this.form.amount = this.form.num&&(this.form.num*this.rate).toFixed(8)
    },
    changeAmount(){
      this.form.num = this.form.amount&&(this.form.amount/this.rate).toFixed(8)
    },
    // 获取当前汇率
    get_exeChange_rate(){
      this.$http.getSilent('wallet/walletExchangeRate',{name:'BTC'},(res)=>{
        this.rate = res.rate
      })
    },
    // 查询用户账户余额
    check_user_havemoney(){
      this.$http.getSilent('wallet/getUserAmount',{accountId:this.current_wallet.account_id,name: this.current_wallet.name},(res)=>{
        this.balance = res.result
      })
    },
    sure_success(){
        const p = {
          accountId:this.current_wallet.account_id,
          btcAmount:this.form.num,
          master_seed:this.current_wallet.master_seed,
          remark:this.form.remark
        }
        this.$http.post('wallet/exchange',p,(res)=>{
          this.push('root:pages/wallet/exechange_result.js',{result:res})
        })
        
    },
    get_attention(){
      let tradeType
      this.c_name === 'FAF' ? tradeType = 5 : tradeType = 4
      this.$http.getSilent('index/tradenote',{tradeType:tradeType},(res)=>{
        this.attention = []
        const content1 = res.returnObject.content1
        const content2 = res.returnObject.content2
        const content3 = res.returnObject.content3
        const content4 = res.returnObject.content4
        const content5 = res.returnObject.content5
        if(content1) this.attention.push(content1)
        if(content2) this.attention.push(content2)
        if(content3) this.attention.push(content3)
        if(content4) this.attention.push(content4)
        if(content5) this.attention.push(content5)
      })
    },
    wxcButtonClicked(){
       if(!this.form.num) return this.toast('请输入兑换数量')
       if(!this.form.amount) return this.toast('请输入转账数量')
       this.$refs.sure_pw.show = true
    }
  }
}
</script>
<style scoped>
.wrapper{
  display: flex;
  flex-direction: row;
}
.exchange{
  flex: 1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.sure-btn{
  margin-top: 30px;
  margin-bottom: 30px;
}
.transfer-choose{
  width: 720px;
  padding-left: 30px;
}
.transfer-title{
  margin-top: 24px;
  font-size: 48px;
  font-family: PingFang SC;

  margin-bottom: 104px;
}
.choose-currency{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 690px;
  height: 90px;
  border-radius: 10px;
}
.currency-name{
  font-size: 30px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
}
.currency-wrapper{
  display: flex;
  flex-direction: row;
}
.address-label{

}
.address-inter{
  /* margin-top: 24px; */
  height: 90px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(233,233,233);

}
.address-input{
  width: 620px;
  height: 90px;
  font-size: 28px;
}
.address-attention{
  width: 690px;
  opacity: 1;
  padding-left: 26px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 26px;
  margin-top: 84px;
}
.transfer-attention{
  font-size: 20px;
  font-family: PingFang SC;
  color: rgba(154,156,164,1);
  line-height: 36px;
  lines:5;
}
</style>
